@use "../_variables" as *;

.container-wrapper {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0;
  background-color: var(--bg-overlay);
  pointer-events: auto;
  
  &.transparent {
    background-color: transparent;
    pointer-events: none;
    
    > div {
      pointer-events: auto;
    }
  }

  &.overlay {
    background-color: var(--bg-op-dark-ultrastrong);
    z-index: $z-overlay !important;
    left: $sidebar-width;
    top: 0;
    width: calc(100vw - $sidebar-width);
    height: 100vh;
    transition: left $transition-normal ease;

    &.full-width {
      left: 0;
      width: 100vw;
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }
}
